<template>
    <div>
        <van-sticky>
            <div class="container">
                <van-search v-model="keyWord" shape="round" background="#FF6633" placeholder="输入商户名、地点" @focus="onFocus"
                    show-action>
                    <template #left>
                        <span class="place">北京</span>
                        <van-icon name="arrow-down" color="white" />
                    </template>
                    <template #action class="user">
                        <van-icon size="30" name="contact" color="white" @click="toLogin" />
                    </template>
                </van-search>
            </div>
        </van-sticky>
    </div>
</template>

<script>
    export default {
        name: 'Header',
        data() {
            return {
                keyWord: ''
            }
        },
        methods: {
            onFocus() {
                this.$router.push({
                    path: 'search'
                })
            },
            toLogin() {
                if (localStorage.getItem('token')) {
                    this.$router.push('personal')
                } else {
                    this.$router.push({
                        path: 'register'
                    })
                }
            }
        },
        created() {}
    }
</script>

<style lang='less' scoped>
    .container {
        /deep/ .van-search__content {
            margin-left: 10px;
        }

        /deep/ .van-search__action {
            line-height: 100%;
        }

        .place {
            color: white;
            font-size: 15px;
        }
    }
</style>